<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:b="http://bootsfaces.net/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <h:head>
        <title>BootsFaces: next-gen JSF Framework</title>
        <meta name="author" content="Riccardo Massera"></meta>
    </h:head>
    <h:body style="padding-top: 60px">
        <ui:composition template="/applayout/pageTemplate.xhtml">
            <ui:define name="content">
                <h:outputScript library="holder" name="holder.js" />
                <h1>Thumbnails</h1>
                <p>You can take advantage of BootsFaces's layout system with the thumbnail component to easily display grids of images, videos, text, and more.</p>
                
                <h3 id="thumbnails-default">Default example</h3>
                <p>By default, the BootsFaces <code>&lt;b:thumbnail&gt;</code> tag is designed to showcase linked images with minimal required markup.</p>
                <b:panel>
                    <f:facet name="heading"><b>EXAMPLE</b></f:facet>
                    <b:row>
                        <b:column col-xs="6" col-md="3">
                            <b:thumbnail>
                                <img data-src="holder.js/100%x180/sky" alt="Generic placeholder thumbnail"/>
                            </b:thumbnail>
                        </b:column>
                        <b:column col-xs="6" col-md="3">
                            <b:thumbnail>
                                <img data-src="holder.js/100%x180/vine" alt="Generic placeholder thumbnail"/>
                            </b:thumbnail>
                        </b:column>
                        <b:column col-xs="6" col-md="3">
                            <b:thumbnail>
                                <img data-src="holder.js/100%x180/lava" alt="Generic placeholder thumbnail"/>
                            </b:thumbnail>
                        </b:column>
                        <b:column col-xs="6" col-md="3">
                            <b:thumbnail>
                                <img data-src="holder.js/100%x180/social" alt="Generic placeholder thumbnail"/>
                            </b:thumbnail>
                        </b:column>
                    </b:row>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>

                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
                            <![CDATA[
                            <b:row>
                                <b:column col-xs="6" col-md="3">
                                    <b:thumbnail>
                                        <img data-src="holder.js/100%x180/sky" alt="Generic placeholder thumbnail"/>
                                    </b:thumbnail>
                                </b:column>
                                ...
                            </b:row>
                            ]]></script>
                    </f:facet>
                </b:panel>
                <h3 id="thumbnails-custom-content">Custom content</h3>
                <p>With a bit of extra markup, it's possible to add any kind of HTML content like headings, paragraphs, or buttons into thumbnails.</p>
                <p>Just add a facet with <code>name="caption"</code> to the component and add your content inside.</p>
                <b:panel>
                    <f:facet name="heading"><b>EXAMPLE - Thumbnail with custom content</b></f:facet>
                    <b:row>
                        <b:column col-sm="6" col-md="4">
                            <b:thumbnail>
                                <img data-src="holder.js/300x200/social" alt="Generic placeholder thumbnail"/>
                                <f:facet name="caption">
                                    <h3>Thumbnail label</h3>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p>
                                        <b:button look="primary" value="Button"/>#{' '}
                                        <b:button value="Button"/>
                                    </p>
                                </f:facet>
                            </b:thumbnail>
                        </b:column>
                        <b:column col-sm="6" col-md="4">
                            <b:thumbnail>
                                <img data-src="holder.js/300x200/vine" alt="Generic placeholder thumbnail"/>
                                <f:facet name="caption">
                                    <h3>Thumbnail label</h3>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p>
                                        <b:button look="primary" value="Button"/>#{' '}
                                        <b:button value="Button"/>
                                    </p>
                                </f:facet>
                            </b:thumbnail>
                        </b:column>
                        <b:column col-sm="6" col-md="4">
                            <b:thumbnail>
                                <img data-src="holder.js/300x200/lava" alt="Generic placeholder thumbnail"/>
                                <f:facet name="caption">
                                    <h3>Thumbnail label</h3>
                                    <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                    <p>
                                        <b:button look="primary" value="Button"/>#{' '}
                                        <b:button value="Button"/>
                                    </p>
                                </f:facet>
                            </b:thumbnail>
                        </b:column>
                    </b:row>
                    <f:facet name="footer">
                        <strong>Markup:</strong><br/>

                        <script type="syntaxhighlighter" class="brush: xml; toolbar: false;first-line: 0">
                            <![CDATA[
                            <b:row>
                                <b:column col-sm="6" col-md="4">
                                    <b:thumbnail>
                                        <img data-src="holder.js/300x200/social" alt="Generic placeholder thumbnail"/>
                                        <f:facet name="caption">
                                            <h3>Thumbnail label</h3>
                                            <p>Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                                            <p>
                                                <b:button look="primary" value="Button"/>
                                                <b:button value="Button"/>
                                            </p>
                                        </f:facet>
                                    </b:thumbnail>
                                </b:column>
                                ...
                            </b:row>
                            ]]></script>
                    </f:facet>
                </b:panel>

                <script type="text/javascript">
                    SyntaxHighlighter.all();
                </script>
                <br/>
                <br/>
            </ui:define>
        </ui:composition>
    </h:body>
</html>
